<script setup>
// import { ref, computed } from 'vue'
</script>
<template>
    <div class="tools-wrap">
        <div class="live-player-tools">
            <div class="direction">
                <div class="direction-item up">
                    <el-icon class="direction-icon"><CaretTop /></el-icon>
                </div>
                <div class="direction-item right">
                    <el-icon class="direction-icon"><CaretRight /></el-icon>
                </div>
                <div class="direction-item left">
                    <el-icon class="direction-icon"><CaretLeft /></el-icon>
                </div>
                <div class="direction-item down">
                    <el-icon class="direction-icon">
                        <CaretBottom />
                    </el-icon>
                </div>
                <div class="direction-audio"></div>
            </div>
            <div class="zoom">
                <div class="zoom-item zoom-in">
                    <el-icon><Plus /></el-icon>
                </div>
                <div class="zoom-item zoom-out">
                    <el-icon><Minus /></el-icon>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.tools-wrap {
    padding-top: 60px;
    margin-left: 30px;
    width: 260px;
    height: calc(100vh - 180px);
    .live-player-tools {
        width: 100%;
    }
}
</style>
